<template>
  <view class="coupon_container">
    <view class="title">
      <text v-for="item in title" :key="item.id"
        :style="item.id === titleId ? 'color:#2871FC;border-bottom: 1px solid #2871fc;' : ''"
        @click=";(titleId = item.id), (memberCouponStatus = item.memberCouponStatus), myCoupon()">
        {{ item.title }}
      </text>
    </view>
    <!-- <view style="height:140rpx"></view> -->
    <view v-if="tableList.length" style="padding: 140rpx 0 150rpx 0">
      <view class="" v-for="(item, index) in tableList" :key="index">
        <Coupon :couponItem="item" :titleId="titleId" @clickCoupon="clickCoupon"></Coupon>
      </view>
    </view>
    <view class="nono" v-else>
      <image :src="staticUrl() + '/personalCenter/$.png'" mode="aspectFit"></image>
      <text>暂无数据~</text>
    </view>
  </view>
  <!-- <view class="coupon_container" v-if="tableList.length">
    <view class="nono">
      <image :src="staticUrl+'/personalCenter/$.png'" mode="aspectFit"></image>
      <text>暂无数据~</text>
    </view>
  </view> -->
</template>

<script>
import { getCoupons, getCouponList, getCurrentCouponList } from '@/api/personalCenter/index.js'

import Coupon from '@/components/coupon/coupon.vue'
export default {
  components: {
    Coupon
  },
  data () {
    return {
      titleId: 1,
      title: [
        {
          id: 1,
          title: '领券中心',
          memberCouponStatus: ''
        },
        {
          id: 2,
          title: '未使用',
          memberCouponStatus: 'NEW'
        },
        {
          id: 3,
          title: '已使用',
          memberCouponStatus: 'USED'
        },
        {
          id: 4,
          title: '已过期',
          memberCouponStatus: 'EXPIRE'
        }
      ],
      memberCouponStatus: '',
      pageNumber: 1,
      pageSize: 300,
      tableList: []
    }
  },
  onLoad (val) {
    val.path ? (this.titleId = val.path) : (this.titleId = 1)
    this.getList()
  },
  methods: {
    getList () {
      this.available()
    },
    clickBtn (val) {
      if (!val.memberCouponStatus) {
        return val.obtainedNum ? `已领取${val.obtainedNum}张` : '点击领取'
      }
      if (val.memberCouponStatus === 'NEW') {
        return '点击使用'
      }
      if (val.memberCouponStatus === 'USED') {
        return '已使用'
      }
      if (val.memberCouponStatus === 'EXPIRE') {
        return '已过期'
      }
    },
    clickCoupon (data) {
      let item = data.data
      if (item.memberCouponStatus === 'NEW') {
        uni.navigateTo({
          url: '/pages_search/index?keyword=' + ' '
        })
        return
      }
      if (item.memberCouponStatus) {
        return
      }
      if (!item.memberCouponStatus && item.obtainedNum !== item.couponLimitNum) {
        getCoupons(item.id).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: '成功',
              mask: true
            })
            this.myCoupon()
          }
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: `此优惠券最多领取${item.obtainedNum}张`,
          mask: true
        })
      }
    },

    // 可领取
    available () {
      this.tableList = []
      // 获取可领取
      getCouponList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          this.tableList = res.data.records

          // this.setFontSize()
        }
      })
    },

    // 未使用 NEW  已使用 USED  已过期 EXPIRE
    myCoupon () {
      if (this.memberCouponStatus) {
        getCurrentCouponList({
          memberCouponStatus: this.memberCouponStatus,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        }).then(res => {
          if (res.code === 200) {
            this.tableList = res.data.records
          }
        })
      } else {
        this.available()
      }
    }
    // setTime(val) {
    // 	return val.split(' ')[0].replace(/-/g, '.')
    // },
    // startTime(val) {
    // 	let startTime = new Date(val)
    // 	return (startTime.getFullYear() + '.' +
    // 		((startTime.getMonth() + 1) < 10 ? '0' + (startTime.getMonth() + 1) : (startTime.getMonth() + 1)) +
    // 		'.' + (startTime.getDate() < 10 ? '0' + startTime.getDate() : startTime.getDate())) + ''
    // },
    // endTime(val) {
    // 	let endTime = new Date(val)
    // 	return (endTime.getFullYear() + '.' +
    // 		((endTime.getMonth() + 1) < 10 ? '0' + (endTime.getMonth() + 1) : (endTime.getMonth() + 1)) +
    // 		'.' + (endTime.getDate() < 10 ? '0' + endTime.getDate() : endTime.getDate())) + ''
    // },
  }
}
</script>

<style lang="scss" scoped>
.coupon_container {
  background: #f9f9f9;
  // height: 100vh;

  .nono {
    padding: 50% 50%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    image {
      width: 129.86rpx;
      height: 122.92rpx;
    }

    text {
      white-space: nowrap;
      font-size: 33rpx;
      font-weight: 400;
      color: #8d8d8d;
      margin-top: 31.94rpx;
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 92rpx;
    font-size: 33rpx;
    background: #fff;
    padding: 29.86rpx 0 0;
    margin-bottom: 21.53rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;

    text {
      color: #8d8d8d;
      padding-bottom: 30.56rpx;
    }
  }

  .item {
    position: relative;
    height: 222rpx;
    background: #fff;
    margin: 0 25rpx;
    margin-bottom: 21.53rpx;
    display: flex;

    .left {
      background: url("https://www.xdyy100.com/wholesale/files/mp/static/personalCenter/coupon.png")
        no-repeat;
      background-size: 225.69rpx 222.22rpx;
      width: 226rpx;
      height: 222rpx;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;

      text {
        color: #fff;
        line-height: 1;
      }

      text:nth-child(1) {
        font-size: 56rpx;
      }

      text:nth-child(2) {
        font-size: 28rpx;
        margin-top: 20.14rpx;
      }

      .PRICE::before {
        content: "￥";
        font-size: 33rpx;
      }

      .DISCOUNT::after {
        content: "折";
        font-size: 33rpx;
        margin-left: 6rpx;
      }
    }

    .bg_2 {
      background: url("https://www.xdyy100.com/wholesale/files/mp/static/personalCenter/couponNot.png")
        no-repeat;
    }

    .right {
      position: relative;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      padding: 38rpx 30rpx;
      width: calc(100% - 225.69rpx);
      font-size: 23rpx;
      font-weight: 400;
      color: #8d8d8d;
      letter-spacing: 2rpx;

      .promotionName {
        font-size: 33rpx;
        font-weight: 800;
        color: #000000;
      }

      .active-time {
      }

      .btn-status {
        position: absolute;
        right: 26rpx;
        top: 90rpx;

        width: 130rpx;
        height: 44rpx;
        // background: #2871FC;
        border-radius: 22rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
      }

      .overdue {
        position: absolute;
        right: 26rpx;
        top: 70rpx;
        width: 134rpx;
        height: 80rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .defa {
        background: #2871fc;
      }

      .gray {
        background: #7eaafd !important;
      }

      .used {
        background: #c9c9c9;
      }
    }
  }
}
</style>
